import React, { Component } from 'react';
import { connect } from 'react-redux';
import './brandIntroduction_top.scss';
import '../../static/css/icon.css';
import TopNav from '../top/topNav/topNav';
import { setTopNav } from '../../store/public/action';

import axios from 'axios';

class BrandIntroductionTop extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isShowTopNav: false,
            num: 0
        };
        this.showTopNav = this.showTopNav.bind(this);
    }

    componentWillMount() {
        axios.get('/topnav')
            .then(response => {
                this.props.setTopNav(response.data)
            })
    }

    onBack = () => {
        this.props.Tophistory.goBack();
    }

    showTopNav = () => {
        if (this.state.isShowTopNav === true) {
            this.setState({
                isShowTopNav: false
            })
        } else {
            this.setState({
                isShowTopNav: true
            })
        }
    }

    onSearch = (e) => {
        this.props.Tophistory.push('/search');
    }

    render() {
        let tamp;
        if (this.state.isShowTopNav) {
            tamp = <TopNav></TopNav>;
        } else if (!this.state.isShowTopNav) {
            tamp = '';
        }
        return (
            <div>
                <div className="brandIntroduction_top" id="brandIntroduction_top">
                    <i className="iconfont Top_black pa" onClick={this.onBack}>&#xe679;</i>
                    <div className="Top_input pa" onClick={this.onSearch}>
                        <input type="text" placeholder="搜索商品" onChange={this.onSearch.bind(this)} />
                        <i className="iconfont pa">&#xe65c;</i>
                    </div>
                    <i className="iconfont Top_category pa" onClick={this.showTopNav}>&#xe636;</i>
                    {tamp}
                </div>
                <div className="brandIntroduction_top_after"></div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    let routehistory = state.publics.routehistory;
    return {
        Tophistory: routehistory
    }
}

const mapDispatchToProps = {
    setTopNav: setTopNav
}

export default connect(mapStateToProps, mapDispatchToProps)(BrandIntroductionTop)